<template>
	<div class="container">
		<v-toolBar :fullPath='postData.opera' :tableColumns='tableColumns' @changeLie='getChangeLie'
			@getSearchIPArr='getToolBarSearchIPArr' @getSearchIP='getToolBarSearchIP'>
		</v-toolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableData" border style="width: 100%" stripe>
			<el-table-column type="index" width="50" label="序号">
			</el-table-column>
			<template v-for="(item) in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :width="item.width" align="center"
					v-if="item.isShow" :sortable="item.sortable" :key="item.prop">
					<template v-slot="scope">
						<!-- <template v-if="item.format == 'DATESPAN_HH'">
							<div v-if="scope.row[item.prop] == '无监控数据'">
								<el-tag type="warning" size="mini" effect="plain">{{ scope.row[item.prop] }}</el-tag>
							</div>
							<div v-else>
								{{ scope.row[item.prop] + '&nbsp;小时前' }}
							</div>
						</template> -->
						<template v-if="item.format == 'MB'">
							<div>
								{{ scope.row[item.prop] ? scope.row[item.prop] + '&nbsp;MB' : scope.row[item.prop] }}
							</div>
						</template>
						<template v-else-if="item.format == 'STATUS'">
							<div v-if="scope.row[item.prop] == 'COMPLETED'">
								<el-tag type="success" size="mini" effect="plain">{{ scope.row[item.prop] }}</el-tag>
							</div>
							<div v-else-if="scope.row[item.prop] == 'FAILED'">
								<el-tag type="danger" size="mini" effect="plain">{{ scope.row[item.prop] }}</el-tag>
							</div>
							<div v-else>
								{{ scope.row[item.prop] }}
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
	</div>
</template>

<script>
	import {
		fetchData,
		getDBbeifen
	} from '@/api/index.js'
	import vPagination from '../../../../common/Pagination.vue';
	import vToolBar from '../../toolbar/Toolbar.vue';
	import tableColumns from './DbBackupColumns.js';
	import bus from 'common/bus.js';

	export default {
		name: 'dbBackup',
		components: {
			vPagination,
			vToolBar
		},
		data() {
			return {
				postData: {
					opera: 'dbBackup',
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'fuzzyquery',
					filters: {
						DBTYPE: 'Oracle'
					}
				},
				tableData: [],
				dataTotal: 0,
				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: '',
				timerName: 'MonitorInfoDataBaseOracleBackup',
				timerEventName: 'timerMonitorInfoDataBaseOracleBackup',
				// timerInterval: 1000 * 60,
				loading: true,
				selectedMonID: ''
			}
		},
		created() {
			this.selectedMonID = this.$store.getters["ItemMonitorOracle/getItem"];
			console.log(this.selectedMonID, '纸质')
			this.postData.filters.MONID = this.selectedMonID.MONID;
			this.getTableData()


			bus.$emit('timerNewTodo', {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0
			});

			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {
					this.getTableData();
				}
			});
		},
		mounted() {
			bus.$on("ItemMonitorOracle", msg => {
				this.resetData();
				this.selectedMonID = msg;
				this.postData.filters.MONID = this.selectedMonID.MONID;
				this.getTableData()
			})
		},
		computed: {
			postDataFn() {
				return {
					postData: JSON.stringify(this.postData)
				}
			},
			timerInterval() {
				return Number(this.$store.state.pageRefresh) * 1000
			}
		},
		methods: {
			async getTableData() {
				this.loading = true
				// let res = await postJavaServerData('Sp/detailsbackup?cid=' + this.selectedMonID.MONID)
				getDBbeifen({
					cid: this.selectedMonID.MONID
				}).then(res => {
					console.log(res)
					if (res) {
						this.dataTotal = res.total
						res.data.forEach((item) => {
							item.needTime = this.formatTime(item.endTime - item.startTime)
							item.sTime = this.changeTime(item.startTime)
							item.eTime = this.changeTime(item.endTime)
						})
						this.tableData = res.data;
						this.loading = false;
					}
				})
			},
			formatTime(timestamp) {
				// 确保时间戳是数字类型
				const ts = Number(timestamp);

				// 创建Date对象（注意时间戳单位：JS需要毫秒，Unix时间戳需*1000）
				const date = new Date(ts);

				// 获取小时和分钟
				const hours = date.getHours().toString().padStart(2, '0'); // 补零
				const minutes = date.getMinutes().toString().padStart(2, '0'); // 补零

				return `${hours}:${minutes}`;
			},
			changeTime(currentTime) {
				// 提取并格式化年、月、日、时、分、秒  
				let date = new Date(currentTime);
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1  
				let day = String(date.getDate()).padStart(2, '0');
				let hours = String(date.getHours()).padStart(2, '0');
				let minutes = String(date.getMinutes()).padStart(2, '0');
				let seconds = String(date.getSeconds()).padStart(2, '0');

				// 将格式化后的年、月、日、时、分、秒拼接成完整的日期时间字符串  
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;
				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;
				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr
					};
				} else {
					this.postData.filters = {};
				}
				this.getTableData();
			},
			getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				this.postData.filters = {
					ip: this.SearchIP
				};
				this.getTableData();
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},

			resetData() {
				this.dataTotal = 0;
				this.tableData = [];
			}
		},
		watch: {

		},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit('timerNewTodo', {
				name: this.timerName
			});
		},
	}
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>